<!--
 * @Description: 尺寸设置
-->

<template>
  <div class="tool-container" v-if="!mSelectMode">
    <h4 class="title">背景</h4>
    <div class="input-item">
      <div class="label">宽度</div>
      <input type="number" v-model="width" @change="setSize">
    </div>

    <div class="input-item">
      <div class="label">宽度</div>
      <input type="number" v-model="height" @change="setSize">
    </div>

    <div class="input-item">
      <div class="label">背景颜色</div>
      <input type="color" v-model="color" @change="setThisColor">
    </div>
  </div>
</template>

<script>
import select from '../mixins/select';
import EditorWorkspace from '../core/EditorWorkspace';

export default {
  name: 'canvasSize',
  mixins: [select],
  inject: ['canvas', 'fabric'],
  data() {
    return {
      width: 750 * 5,
      height: 350 * 5,
      color: '',
      presetSize: [
        {
          label: '手机壁纸',
          width: 1080,
          height: 1920,
        },
      ],
    };
  },
  mounted() {
    this.canvas.editor.editorWorkspace = new EditorWorkspace(this.canvas.c, {
      width: this.width,
      height: this.height,
    });

    const workspace = this.canvas.c.getObjects().find((item) => item.id === 'workspace');
    this.color = workspace.fill
  },
  methods: {
    setSizeBy(width, height) {
      this.width = width;
      this.height = height;
      this.setSize();
    },
    setSize() {
      this.canvas.editor.editorWorkspace.setSize(Number(this.width), Number(this.height));
    },
    // 背景颜色设置
    setThisColor() {
      this.setColor(this.color);
    },
    // 背景颜色设置
    setColor(color) {
      const workspace = this.canvas.c.getObjects().find((item) => item.id === 'workspace');
      workspace.set('fill', color);
      this.canvas.c.renderAll();
    },
  },
};
</script>

<style scoped lang="scss">
</style>
